<template>
  <el-form
    ref="ruleFormRef"
    :model="ruleForm"
    :rules="rules"
    label-width="220px"
    label-position=""
    size="default"
  >
    <el-row>
      <el-col :span="12">
        <el-form-item
          label="试生产（使用）期限起始日期"
          prop="vehicleNum"
          class="singerH"
        >
          <el-input
            v-model.trim="ruleForm.vehicleNum"
            placeholder="请输入车辆号码"
            clearable
          ></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item
          label="试生产（使用）期限截止日期"
          prop="contactPersonName"
        >
          <el-input
            v-model.trim="ruleForm.vehicleNum"
            placeholder="请输入车辆号码"
            clearable
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item
          :label="'试生产设计、施工、监理等\n单位名称'"
          prop="contactPersonName"
          class="fold_label"
        >
          <el-input
            v-model.trim="ruleForm.vehicleNum"
            placeholder="请输入车辆号码"
            clearable
          ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="试生产评价报告上传" prop="vehicleNum">
          <upload-image-multiple></upload-image-multiple>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref, toRefs, watch, getCurrentInstance } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import commonConst from "@/config/const.js";
import UploadImage from "@/components/upload/UploadImage.vue";
import { UP_LOAD_URL } from "@/config/index.js";
import UploadImageMultiple from "@/components/upload/UploadImageMultiple.vue";

/**
 * 全局方法引入
 */
const global = getCurrentInstance().appContext.config.globalProperties;

interface RuleForm {
  id?: Number;
  vehicleNum: string;
  contactPersonName: string;
  vehicleType: string;
  workUnit: string;
  contactPersonTel?: string;
  unitAddress?: string;
}
const textarea = ref("");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  vehicleNum: "",
  contactPersonName: "",
  vehicleType: "",
  workUnit: "",
  contactPersonTel: "",
  unitAddress: "",
  enclosureImage: "",
});

const rules = reactive<FormRules>({
  vehicleNum: [{ required: true, message: "请输入车辆号码", trigger: "blur" }],
  contactPersonName: [
    { required: true, message: "请输入负责人", trigger: "blur" },
  ],
  vehicleType: [{ required: true, message: "请选择车辆类型", trigger: "blur" }],
  workUnit: [{ required: true, message: "请选择所属单位", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      let api = "";
      if (send.value.status === "add") {
        api = "addVehicle";
      } else {
        api = "updateVehicle";
      }
      global.$api[api](ruleForm).then(({ data }) => {
        if (data.status === "OK") {
          if (send.value.status === "add") {
            ElMessage.success("新增成功！");
          } else {
            ElMessage.success("变更成功！");
          }
        }
        resetForm(ruleFormRef.value);
        emits("clean", { info: {}, status: "" });
      });
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
  formEl.clearValidate();
};
/**
 * 父组件传给子组件的prop
 */
const props = defineProps({
  send: Object,
});
const { send } = toRefs(props);

/**
 * 子组件触发父组件的方法
 */
const emits = defineEmits(["clean"]);
const uploadFile = (value) => {
  ruleForm.enclosureImage = value;
};
</script>
<style scoped>
/* 过于长的label分两行展示样式 */
:deep().fold_label .el-form-item__label {
  white-space: pre-line;
  text-align-last: center;
  text-align: justify;
  margin-top: 0px;
  line-height: 25px;
  text-justify: distribute-all-lines;
}
/* 其他label根据宽度自动撑开 */
.el-form-item__label {
  text-align-last: justify;
  text-align: justify;
  text-justify: distribute-all-lines;
}
</style>
